'use client';

/**
 * 列表批量操作工具条
 * - 展示已选择数量
 * - 支持清空选择与多操作按钮
 */

import React from 'react';
import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

function BatchActionBar({
  selectedCount = 0,
  actions = [],
  onClear,
  className,
  children,
}) {
  if (!selectedCount && !children) {
    return null;
  }

  return (
    <div
      className={cn(
        'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-dashed border-primary/40 bg-primary/5 px-4 py-2.5',
        className,
      )}
    >
      <div className="flex flex-wrap items-center gap-2 text-sm">
        <Badge variant="secondary" className="font-medium">
          {selectedCount}
        </Badge>
        <span className="text-muted-foreground">
          已选择 {selectedCount} 项
        </span>
        {onClear && (
          <Button
            variant="ghost"
            size="sm"
            onClick={onClear}
            className="gap-1 px-2 text-xs"
          >
            <X className="size-4" />
            清除选择
          </Button>
        )}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        {actions.map((action) => {
          const Icon = action.icon;
          return (
            <Button
              key={action.key ?? action.label}
              variant={action.variant ?? 'default'}
              size={action.size ?? 'sm'}
              onClick={action.onClick}
              disabled={action.disabled}
              className={cn('gap-1.5', action.className)}
            >
              {Icon ? <Icon className="size-4" /> : null}
              {action.label}
            </Button>
          );
        })}
        {children}
      </div>
    </div>
  );
}

export { BatchActionBar };


